<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .moh{
            width:640px;
            height:510px;
            border-radius: 50%;
            background-image: url('../img/fj.png');
            background-size: cover;
            box-shadow: inset ;
        }
    </style>
</head>
<body>
    <!-- <svg style="background-color:#29cb5b" width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" >
        <defs>
            <radialGradient id="radia_gra" cx="50%" cy="50%" r="100%">
                <stop offset="0%" stop-color="#ffffff" stop-opacity="1.0"></stop>
                <stop offset="40%" stop-color="#ffffff" stop-opacity="0.8"></stop>
                <stop offset="50%" stop-color="#ffffff" stop-opacity="0.0"></stop>
            </radialGradient>
            <mask id="vagueMask" >
                <ellipse cx="120" cy="250" rx="100" ry="150" fill="url(#radia_gra)">
                    <animate attributeName="cx" attributeType="XML" from="120" repeatCount="indefinite"  to="320" begin="0s" dur="5s" fill="freeze"></animate>
                </ellipse>
            </mask>
        </defs>
        <image xlink:href="../img/fj.png" x="0" y="0" width="640" height="510" mask="url(#vagueMask)"/>
    </svg> -->
    <svg style="background-color:#10722f" width="725" height="500" xmlns="http://www.w3.org/2000/svg" >
        <defs>
            <path id="path_hart" d="M0 250 h 300 L 317.5 150 L 342.5 350 L 375 50 L 400 450 L 417.5 250 h 300" fill='transparent' />
            <radialGradient id="grad1" cx="50%" cy="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0" />
            </radialGradient>
            <filter id="f1" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceGraphic" dx="1" dy="1" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="20" />
                <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
            <mask id="mask_hart">
                <circle cx='0' cy='0' r='30' fill='url(#grad1)' filter="url(#f1)">
                    <animateMotion id="stp1" dur='0.5s' begin="0;stp3.end" path="M0 250 h 300 "  />
                    <animateMotion id="stp2" dur='0.8s' begin="stp1.end" path="M300 250 L 317.5 150 L 342.5 350 L 375 50 L 400 450 L 417.5 250"  />
                    <animateMotion id="stp3" dur='0.5s' begin="stp2.end" path="M 417.5 250 h 300"  />
                </circle>
            </mask>
        </defs>
        <g id="bg">
            <path d="M 0 50 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 100 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 150 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 200 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 250 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 300 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 350 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 400 h 1000" stroke="#2f523a" stroke-width="1"/>
            <path d="M 0 450 h 1000" stroke="#2f523a" stroke-width="1"/>

            <path d="M 50 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 100 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 150 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 200 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 250 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 300 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 350 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 400 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 450 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 500 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 550 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 600 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 650 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 700 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 750 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 800 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 850 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 900 0 v 500" stroke="#2f523a" stroke-width="1"/>
            <path d="M 950 0 v 500" stroke="#2f523a" stroke-width="1"/>
        </g>
        <path d="M0 250 h 300 L 317.5 150 L 342.5 350 L 375 50 L 400 450 L 417.5 250 h 300" stroke="#1eb54e" stroke-width="3" fill="none"/>
        <use href='#path_hart' stroke="white" stroke-width="3" mask="url(#mask_hart)">
            <animate id="mv1" attributeName='stroke-dasharray' from='0, 300' to='300, 0' dur='0.5s' begin="0;mv3.end"/>
            <animate id="mv2" attributeName='stroke-dasharray' from='0, 3525' to='3525, 0' dur='0.8s' begin="mv1.end" />
            <animate id="mv3" attributeName='stroke-dasharray' from='0, 300' to='300, 0' dur='0.5s' begin="mv2.end" />
        </use>
    </svg>
</body>
</html>